<template>
  <div>
    <h1>直播管理</h1>
    <el-button type="primary" @click="addLive">预约直播</el-button>
    <button v-if="cameraFlag" @click="switchCamera" >打开摄像头</button>
    <button v-if="!cameraFlag" @click="stopCamera" >关闭摄像头</button>
    <button v-if="microphoneFlag" @click="switchMicrophone" >打开麦克风</button>
    <button v-if="!microphoneFlag" @click="stopMicrophone" >关闭麦克风</button>
    <button v-if="screenCaptureFlag" @click="switchScreenCapture" >打开屏幕共享</button>
    <button v-if="!screenCaptureFlag" @click="stopScreenCapture" >关闭屏幕共享</button>
    <button v-if="(pushFlag&&!cameraFlag)||(pushFlag&&!screenCaptureFlag)||(pushFlag&&!mediaFileFlag) " id="startPushBtn" @click="handleStartPush" >开始直播</button>
    <button v-if="!pushFlag" id="stopPushBtn" @click="handleStopPush" >结束直播</button>
    <button v-if="cameraFlag"  @click="huoqushebei" >获取设备</button>
    <button v-if="mediaFileFlag"  @click="startMediaFile" >播放本地媒体文件</button>
    <button v-if="!mediaFileFlag"  @click="stopMediaFile" >停止本地媒体文件</button>
    <div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;">

    </div>

    <el-dialog
      title="请输入直播信息"
      :visible.sync="dialogVisible"
      width="70%">
      <el-form ref="form" :model="live" label-width="80px">
        <el-form-item label="直播标题">
          <el-input v-model="live.liveTitle"></el-input>
        </el-form-item>
        <el-form-item label="专家">
          <el-select v-model="live.specialistId" placeholder="请选择专家">
            <el-option
              v-for="item in expertList"
              :key="item.specialistId"
              :label="item.specialistName"
              :value="item.specialistId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计开始时间" >
          <el-date-picker
            v-model="live.startTime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计结束时间" >
          <el-date-picker
            v-model="live.endTime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addlive">预约</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>
<script  >
import { getSpecialistAll, addLive, getLiveUrlBySpecialistId, getLiveUrlByLivId, finishLive } from "@/api/course";
export default {
  data(){
    return{
      livePusher:null,
      cameraFlag:true,
      microphoneFlag:true,
      screenCaptureFlag:true,
      pushFlag:true,
      dialogVisible:false,
      live:{},
      expertList:[],
      mediaFileFlag:true
    }
  },
  mounted() {
    getSpecialistAll(1,10).then(res=>{
      this.expertList=res.data
    })
    //生成推流 SDK 实例：
    this.livePusher = new TXLivePusher();
    //指定本地视频播放器容器 div，浏览器采集到的音视频画面会渲染到这个 div 当中。
    this.livePusher.setRenderView('id_local_video');
    // 设置视频质量
    this.livePusher.setVideoQuality('720p');
    // 设置音频质量
    this.livePusher.setAudioQuality('standard');
    // 自定义设置帧率
        //设置视频的帧率
    this.livePusher.setProperty('setVideoFPS', 25);
        //设置视频的分辨率
    /*this.livePusher.setProperty('setVideoResolution',{
      width: 1920,
      height:1080
    })*/
        //设置视频的码率
      this.livePusher.setProperty('setVideoBitrate',4000)


  },
  methods:{
    stopMediaFile(){  //停止采集本地媒体文件流，结束本地文件播放
      this.livePusher.stopMediaFile()
      this.mediaFileFlag=true
    },
    startMediaFile(){ //开始采集本地媒体文件流。将用户本地的 MP4 视频文件转换成音视频流
      this.livePusher.startMediaFile()
      this.mediaFileFlag=false
    },
    huoqushebei(){
      var deviceManager = this.livePusher.getDeviceManager();
      // 获取设备列表
      deviceManager.getDevicesList().then(function(data) {
        data.forEach(function(device) {
          console.log(device.deviceId, device.deviceName);
        });
      });
    },
    addlive(){
      addLive(this.live).then(res=>{
        //sessionStorage.setItem('specialistId',this.live.specialistId)
        console.log('live',res)
        sessionStorage.setItem('liveId',res.data)
        alert('预约成功')
        this.dialogVisible=false
        this.live={}
      })
    },
    addLive(){
      this.dialogVisible=true
    },
    stopCamera(){// 关闭摄像头
      this.livePusher.stopCamera();
      this.cameraFlag=true
    },
    switchCamera() {// 打开摄像头
      this.livePusher.startCamera();
      this.cameraFlag=false
    },
    switchMicrophone(){ // 打开麦克风
      this.livePusher.startMicrophone();
      this.microphoneFlag=false
    },
    stopMicrophone(){
      this.livePusher.stopMicrophone();
      this.microphoneFlag=true
    },
    switchScreenCapture(){  //开启屏幕采集
      this.livePusher.startScreenCapture()
      this.screenCaptureFlag=false
    },
    stopScreenCapture(){
      this.livePusher.stopScreenCapture()
      this.screenCaptureFlag=true
    },
    handleStartPush(){
      //let specialistId =sessionStorage.getItem('specialistId')
      /*getLiveUrlBySpecialistId(specialistId).then(res=>{
        console.log(res)
        this.livePusher.startPush(res.data.liveUrl)
        this.pushFlag=false
      })*/

      let liveId =sessionStorage.getItem('liveId')
      getLiveUrlByLivId(liveId).then(res=>{
        this.livePusher.startPush(res.data.liveUrl)
        this.pushFlag=false
      })
    },
    handleStopPush(){
      let liveId =sessionStorage.getItem('liveId')
      finishLive(liveId).then(res=>{
        this.livePusher.stopPush()
        this.pushFlag=true
        alert('关闭成功')
      })
    }
  }
}
</script>
<style>

</style>
